<template>
	<view class="list">
		<view class="top">
			<!-- 搜索框 -->
			<view class="searchbox">
				<uni-search-bar @confirm="myconfim" v-model="myparams.query" cancelButton="none"></uni-search-bar>
			</view>
			<!-- tab 栏 -->
			<view class="tabs">
				<view @click="changeIndex(index)" class="tab-item" :class="{ active: activeIndex === index }"
					v-for="(item, index) in tabs" :key="index">
					{{ item }}
				</view>
			</view>
		</view>
		<!-- 商品列表数据 -->
		<view class="goodslist">
			<view @click="toDetail(item.goods_id)" v-for="(item,index) in searchList" :key="index">
				<my-goods :item="item"></my-goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tabs 的选项
				tabs: ['综合', '销量', '价格'],
				// 选中的下标
				activeIndex: 0,
				// 获取列表的参数
				myparams: {
					query: '', // 搜索的关键字
					pagenum: 1, // 当前页
					pagesize: 10, // 页容量
				},
				// 搜索数据源
				searchList: [],
				// 总数
				total: 0,
				// 加载中的状态，节流
				isLoading: false
			};
		},
		onLoad(options) {
			// 获取传入的参数
			this.myparams.query = options.key
			// 调用获取搜索列表的数据
			this.getSearchList()
		},
		methods: {
			// 重新获取数据
			myconfim() {
				// 重置数据源
				this.myparams.pagenum = 1
				this.searchList = []
				this.total = 0
				this.isSending = false
			 // 重新请求数据
				this.getSearchList()
			},
			// 点击商品跳转到详情页
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_detail/main?goods_id=${id}`
				})
			},
			changeIndex(index) {
				this.activeIndex = index
			},
			// 获取搜索列表数据
			async getSearchList(bool) {
				// 将isLoading改为true
				this.isLoading = true
				const res = await uni.$http.get('/api/public/v1/goods/search', this.myparams)
				// 判断
				if (res.data.meta.status !== 200) return uni.$showMsg()
				// 保存数据
				this.searchList = [...this.searchList, ...res.data.message.goods]
				this.total = res.data.message.total
				// isLoading改为false
				this.isLoading = false
				if (bool) uni.stopPullDownRefresh()
			},
		},
		// 上拉触底事件
		onReachBottom() {
			// 判断数据是否加载全部完成
			if (this.searchList.length === this.total) return uni.showToast({
				title: '数据已全部加载完毕'
			})
			// 判断是否在加载中
			if (this.isLoading) return
			// 页数 +1 
			this.myparams.pagenum += 1
			// 重新获取数据
			this.getSearchList()
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			// 重置数据源
			this.myparams.pagenum = 1
			this.searchList = []
			this.total = 0
			this.isSending = false
			// 重新请求数据
			this.getSearchList(true)
		}
	}
</script>

<style lang="scss">
	.top {
		position: sticky;
		top: 0;
		left: 0;
	}

	.list {
		.searchbox {
			background-color: #eeeeee;
		}

		.tabs {
			display: flex;
			height: 100rpx;
			border-bottom: 1px solid #f2f2f2;
			background-color: #FFFFFF;

			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
				color: #5d5d5d;

				&.active {
					color: #ee6f7a;
				}
			}
		}

		.goodslist {
			padding: 0 20rpx;
		}
	}
</style>
